<script setup lang="ts">
import { ref, computed } from 'vue'

const enableEditInfo = ref(false)

interface MaintenanceInfo {
  // 保养时间间隔
  interval: number
  // 预警值
  warning: number
  // 当前累积分钟
  current: number
  // 距离下次保养分钟
  nextTime: number
}

const maintenanceInfo = ref<MaintenanceInfo>({
  interval: 119,
  warning: 100,
  current: 30,
  nextTime: 20
})

const interval = computed(() => {
  return getDateTimeString(maintenanceInfo.value.interval)
})

const warning = computed(() => {
  return getDateTimeString(maintenanceInfo.value.warning)
})

const current = computed(() => {
  return getDateTimeString(maintenanceInfo.value.current)
})

const nextTime = computed(() => {
  return getDateTimeString(maintenanceInfo.value.nextTime)
})

function getDateTimeString(value: number) {
  let days = (value / (24 * 60)) | 0
  let hours = ((value % (24 * 60)) / 60) | 0
  let minutes = (value % (24 * 60)) % 60

  return `${days} 天 ${hours} 小时 ${minutes} 分钟`
}

let stepIndex = ref(0)

const stepList = ref([
  {
    // title: '设备保养报警',
    title: '无需保养',
    status: 'success',
    description: '设备保养时间已到，请立即保养'
  },
  {
    title: '创建设备变更工单',
    status: 'wait',
    description: '设备保养前，需要创建设备变更工单流程',
    showCreateOrderLink: computed(() => stepIndex.value == 1)
  },
  {
    title: '保养设备',
    status: 'wait',
    description: '对设备各个部件进行保养'
  },
  {
    title: '清除累积运行时间',
    status: 'wait',
    description: '设备部件保养完成，要清除设备累积运行时间'
  },
  {
    title: '保养点检',
    status: 'wait',
    description: '保养存在问题列表点检',
    showCheckLink: computed(() => stepIndex.value == 4)
  },
  {
    title: '完成保养',
    status: 'wait',
    description: '保养过程结束'
  }
])

function onNextStep() {
  if (stepIndex.value < stepList.value.length) {
    stepList.value[stepIndex.value].status = 'success'
    stepIndex.value = stepIndex.value + 1
    if (stepIndex.value < stepList.value.length) {
      stepList.value[stepIndex.value].status = 'process'
    }
  }
}
function onFrontStep() {
  if (stepIndex.value == stepList.value.length) {
    stepIndex.value = stepIndex.value - 1
    stepList.value[stepIndex.value].status = 'process'
  } else if (stepIndex.value > 0 && stepIndex.value < stepList.value.length) {
    stepList.value[stepIndex.value].status = 'wait'
    stepIndex.value = stepIndex.value - 1

    if (stepIndex.value == 0) {
      stepList.value[stepIndex.value].status = 'error'
    } else {
      stepList.value[stepIndex.value].status = 'process'
    }
  }
}
</script>

<template>
  <main class="main-container center-container">
    <div class="center-container" style="height: 80%">
      <img src="@/assets/img/pulping-machine.png" style="height: 80%" />
    </div>
    <div class="center-container" style="width: 80%; height: 20%; padding: 10px">
      <el-steps finish-status="success" style="width: 100%; height: 100%" align-center>
        <el-step
          v-for="stepItem in stepList"
          :title="stepItem.title"
          :status="stepItem.status"
          :description="stepItem.description"
        >
          <template v-if="stepItem.showCreateOrderLink" #description>
            <el-text size="small">{{ stepItem.description }}</el-text>
            <br />
            <el-link type="primary" href="https://www.baidu.com">创建工单</el-link>
          </template>
          <template v-else-if="stepItem.showCheckLink" #description>
            <el-text size="small">{{ stepItem.description }}</el-text>
            <br />
            <el-link type="primary" href="https://www.baidu.com">开始点检</el-link>
          </template>
          <template v-else #description>
            <el-text size="small">{{ stepItem.description }}</el-text>
            <br />
            <br />
          </template>
        </el-step>
      </el-steps>
      <div style="margin-top: 10px">
        <el-button type="default" @click="onFrontStep">上一步</el-button>
        <el-button type="default" @click="onNextStep">下一步</el-button>
      </div>
    </div>
    <div style="position: absolute; width: 14%; left: 2%; top: 50%; transform: translateY(-50%)">
      <el-card header="保养计划" shadow="always">
        <div>
          <el-text>保养周期 : </el-text>
          <el-input v-model="interval" readonly></el-input>
        </div>
        <div style="margin-top: 4px">
          <el-text>设备累积运行时间: </el-text>
          <el-input v-model="current" readonly></el-input>
        </div>
        <div style="margin-top: 4px">
          <el-text>保养预警值: </el-text>
          <el-input v-model="warning" readonly></el-input>
        </div>
        <div style="margin-top: 4px">
          <el-text>距离下次保养: </el-text>
          <el-input v-model="nextTime" readonly></el-input>
        </div>
      </el-card>
    </div>
  </main>
</template>

<style scoped>
.main-container {
  height: 100%;
  width: 100%;
  position: relative;
}

.fill-container {
  height: 100%;
  width: 100%;
}

.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>
